<script>
import {getAddShow, getArticle, getDelShow, getEditShow, getShowSide} from "@/utils/class/Pluponform";
import {getToken} from "@/utils/auth";

export default {
  name: "slideshowPage",
  data() {
    return {
      currentType: '0',
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      action: process.env.VUE_APP_BASE_API + "/common/upload",
      url: 'http://1.117.81.216:8086/stage-api',
      //添加
      dialogVisible: false,
      //表格
      tableData: [],
      form: {
        region: '',
      },
      options: [],
      //状态按钮
      value: true,
      radio: '1',
      //上传图片
      imageUrl: '',
      artQuery: {
        pageNum: '1',
        pageSize: '10000'
      },
      artList: [],
      //添加参数
      addShowQ: {
        enable: '1',
        operationId: '',
        operationType: '1',
        picture: '',
        url: '',
      },
      //编辑轮播图参数
      editShowQ: {
        enable: '1',
        url: '',
        picture: '',
        operationType: '1',
        operationId: '',
        id: ''
      }

    };
  },
  methods: {
    changeArticle(val) {
      this.form.region = val
      this.editShowQ.operationId = val
    },
    //添加
    addShow() {
      console.log()
      this.dialogVisible = true
      this.imageUrl = ''
      this.form.region = ''
    },
    //编辑
    edit(row) {
      this.dialogVisible = true
      this.currentType = 1
      // console.log(row)
      this.id = row.id
      this.imageUrl = row.picture
      this.form.region = row.operationId

    },
    //添加、编辑完保存
    sure() {
      if (this.currentType === '0') {
        this.dialogVisible = false
        this.addShowQ.operationId = this.form.region
        this.addShowQ.picture = this.imageUrl
        getAddShow(this.addShowQ).then(res => {
          console.log(res)
          this.$message.success('添加成功')
          getShowSide().then(res => {
            //  console.log(res)
            this.tableData = res.rows
          })
        })
      } else {
        this.dialogVisible = false
        this.editShowQ.id = this.id
        this.editShowQ.operationId = this.form.region
        this.editShowQ.picture = this.imageUrl
        this.editShowQ.url = this.url
        // console.log(this.editShowQ)
        getEditShow(this.editShowQ).then(res => {
          // console.log(res)
          this.$message.success('编辑成功')
          getShowSide().then(res => {
            //console.log(res)
            this.tableData = res.rows
          })
        })
      }

    },
    //删除
    delBtn(item) {
      //console.log(item)
      this.removeList = item
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        getDelShow({ids: item.id}).then(res => {
          // console.log(res)
          getShowSide().then(res => {
            //  console.log(res)
            this.tableData = res.rows
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },


    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    //表格
    handleClick(row) {
      console.log(row);
    },
    //上传图片
    handleAvatarSuccess(res, file) {
      // console.log(file.response.url)
      this.imageUrl = file.response.url
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //轮播图状态
    changeStatus() {
      // this.editShowQ.operationId = item.operationId
      // this.editShowQ.enable = item.enable
      // this.editShowQ.id = item.id
      // this.editShowQ.operationType = item.operationType
      // this.editShowQ.picture = item.imageUrl
      // this.editShowQ.url = item.url

      this.$message.success('更改状态成功')
    }
  },
  created() {
    //轮播图页面渲染
    getShowSide().then(res => {
      //console.log(res)
      this.tableData = res.rows
    })
    //文章跳转
    getArticle(this.artQuery).then(res => {
      // console.log(res)
      this.artList = res.rows
    })
  }
}
</script>

<template>
  <div>
    <div style="padding: 40px">
      <!--      添加、编辑模态框-->
      <div class="top">
        <el-button type="primary" @click="addShow">添加</el-button>

        <el-dialog
          :before-close="handleClose"
          :title="currentType === '0' ? '添加' : '编辑'"
          :visible.sync="dialogVisible"
          width="30%">
          <div class="img">
            <p style="float: left;margin-left: 20px">封面图片</p>
            <el-upload
              :action="action"
              :before-upload="beforeAvatarUpload"
              :headers="headers"
              :on-success="handleAvatarSuccess"
              :show-file-list="false"
              class="avatar-uploader">
              <img v-if="imageUrl" :src="`http://1.117.81.216:8086/stage-api${this.imageUrl}`" alt="" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <div>
            <el-radio v-model="radio" label="1" style="margin-left: 20px; margin-top: 30px">内链</el-radio>
          </div>
          <div style="margin-left: 10px; margin-top: 30px">
            <el-form ref="form" :model="form" label-width="120px" maxlength="10"
                     show-word-limit>
              <el-form-item label="请选择跳转文章">
                <el-select v-model="form.region" @change="changeArticle(form.region)">
                  <el-option v-for="item in this.artList" :key="item.id" :label="item.title"
                             :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="sure">确 定</el-button>
  </span>
        </el-dialog>
      </div>
      <!--      表格-->
      <div class="main" style="margin-top: 30px">
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            label="序号"
            type="index"
            width="180">
          </el-table-column>
          <el-table-column
            label="轮播图片"
            prop="picture">
            <template slot-scope="scope">
              <div class="demo-image__placeholder">
                <div class="block">
                  <img :src="`http://1.117.81.216:8086/stage-api${scope.row.picture}`" alt="">
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="方式"
            prop="name">
            内链
          </el-table-column>
          <el-table-column
            label="状态"
            prop="name"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.enable"
                active-color="#1890ff"
                active-value="1"
                inactive-color=""
                inactive-value="0"
                @change="changeStatus(scope.row)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            label="更新时间"
            prop="updateTime"
            width="200"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="200">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="edit(scope.row)">编辑</el-button>
              <el-button size="small" type="text" @click="delBtn(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
::v-deep.el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell {
  text-align: center;
}

::v-deep.el-table td.el-table__cell div {
  text-align: center;
}

::v-deep.img {
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-left: 10px;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }

  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }
}

::v-deep.el-form-item__label {
  padding: 30px 20px;
  color: #606266;
  word-break: break-all;
  font-weight: 200;
}

.avatar-uploader-icon {
  border: 1px solid #000000;
}

.block {
  img {
    width: 300px;
    height: 100px;
  }
}

</style>
